* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 20px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem;
  background-color: #222;
  color: #ddd;
  font-size: 0.8rem;
}

.scene-container {
  position: relative;
  top: 100px;
  width: 30rem;
  height: 20rem;
  margin: 1rem;
  overflow: hidden;
  perspective: 100rem;
  background-color: rgb(random() * 10, random() * 10, random() * 20 + 40);
  background-image: radial-gradient(
    20rem at 50% 90%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  transform: translateZ(0);
  border-radius: 50%;
  .container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    perspective: 100rem;
    transform-style: preserve-3d;
    transition: all 1s ease-in-out;
    &.star {
      filter: blur(0.05rem);
    }
    &.smoke {
      filter: blur(0.5rem);
    }
    &.fire {
      filter: blur(0.2rem) url(#multiply);
    }
    &.bright {
      filter: blur(0.1rem) url(#multiply);
    }
    &.glow {
      filter: blur(2rem) url(#multiply);
    }
    &.bug {
      filter: blur(0.05rem) url(#multiply);
    }
    &.vignette {
      filter: url(#multiply);
    }
    .particle {
      position: absolute;
      left: 50%;
      animation-fill-mode: both;
    }
  }
}

// star
@for $i from 1 through 50 {
  $x-position: random() * 30;
  $y-position: random() * 20;
  $size: random() * 0.05 + 0.05;
  $hue: random() * 50 + 100;
  $lightness: 0.9 + random() * 0.1;
  $particle-speed: random() * 2 + 1;
  $bezier: cubic-bezier(0.4, 0.51, 0.83, 0.67);
  $animate-delay: calc(random() * 200 * -1ms);
  .particle.star-particle:nth-child(#{$i}) {
    width: #{$size}rem;
    height: #{$size}rem;
    left: #{$x-position}rem;
    top: #{$y-position}rem;
    background-color: hsl($hue, 100%, percentage($lightness));
    animation: star 800ms $bezier infinite alternate;
    animation-delay: $animate-delay;
  }
}

@keyframes star {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

//shooting-star
.shooting-star {
  $x-position: random() * 0.5 + 0.5;
  $y-position: random() * 0.3;
  $hue: random() * 50 + 100;
  $lightness: 0.9 + random() * 0.1;
  $size: random() * 0.3 + 0.05;
  $animate-delay: random() * 5 + 2;

  //   display: if(random() > 0.95, block, none);
  display: block;

  position: absolute;
  width: #{$size}rem;
  //   width: 1rem;
  height: #{$size}rem;
  //   height: 1rem;
  top: percentage($y-position);
  left: percentage($x-position);
  background-color: hsl($hue, 100%, percentage($lightness));
  border-radius: 50%;
  animation: shooting-star 800ms ease-in 1 normal;
  animation-delay: #{$animate-delay}s;
  animation-fill-mode: both;
}

@keyframes shooting-star {
  $x-end: random() * 20 - 10;
  $y-end: random() * 5 + 10;
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0.5;
  }
  99% {
    transform: translate3d(#{$x-end}rem, #{$y-end}rem, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(#{$x-end}rem, #{$y-end}rem, 0);
    opacity: 0;
  }
}

// ground

.container.ground {
  $y-rotation: random() * 0.1 - 0.05;
  top: auto;
  left: -7%;
  right: -7%;
  bottom: -0.5rem;
  height: 13rem;
  background-color: rgb(10, 40, 10);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, random() * 0.2 + 0.3),
    rgba(0, 0, 0, random() * 0.1)
  );
  transform: rotate3d(1, #{$y-rotation}, 0, 82deg);
  background-blend-mode: multiply;
  transform-origin: 50% 100%;
  .ground-glow {
    $animate-duration: 500 + random() * 500;
    height: 100%;
    background-image: radial-gradient(
        6rem at 50% -50%,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0) 100%
      ),
      radial-gradient(
        12rem at 50% -50%,
        hsla(30, 80%, 50%, 1) 0%,
        hsla(30, 80%, 50%, 0) 100%
      );
    animation: ground-glow #{$animate-duration}ms ease-in-out infinite alternate;
  }
}
@keyframes ground-glow {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.3;
  }
}

// smoke

.container {
  &.smoke {
    .smoke-particle {
      bottom: 4.5rem;
      border-radius: 0.5rem;
      @for $i from 1 through 100 {
        // Size
        $width: random() * 1 + 0.5;
        $height: random() * 1 + 0.5;
        // Color
        $hue: random() * 50;
        $saturation: random() * 0.1;
        $lightness: 0.1 + random() * 0.5;
        // Animation
        $particle-speed: random() * 2 + 1;
        $bezier: cubic-bezier(0.4, 0.51, 0.83, 0.67);
        $animation-delay: random() * 200 * -1;
        &:nth-child(#{$i}) {
          width: #{$width}rem;
          height: #{$height}rem;
          background-color: hsl(
            $hue,
            percentage($saturation),
            percentage($lightness)
          );
          animation: smoke-particle-#{$i}
            #{$particle-speed}s
            $bezier
            infinite
            normal;
          animation-delay: #{$animation-delay}ms;

          $x-start: random() * 5 - 2.5;
          $y-start: random();
          $z-start: random() * 5 - 2.5;

          $x-mid: random() * 2 - 1;
          $y-mid: random() * -7;
          $z-mid: random() * 5 - 2.5;

          $x-end: random() * 7 - 3.5;
          $y-end: -7 + random() * -7;
          $z-end: random() * 5 - 2.5;

          @keyframes smoke-particle-#{$i} {
            0% {
              transform: translate3d(
                  #{$x-start}rem,
                  #{$y-start}rem,
                  #{$z-start}rem
                )
                scale(1);
            }
            50% {
              transform: translate3d(#{$x-mid}rem, #{$y-mid}rem, #{$z-mid}rem)
                scale(0.75);
            }
            100% {
              transform: translate3d(#{$x-end}rem, #{$y-end}rem, #{$z-end}rem)
                scale(0.1);
            }
          }
        }
      }
    }
  }
  &.fire {
    .fire-particle {
      bottom: 3rem;
      border-radius: 0.25rem;

      @for $i from 1 through 100 {
        // Size
        $width: random() * 0.5 + 0.5;
        $height: random() * 0.5 + 0.5;
        // Animation
        $particle-speed: random() * 1 + 0.25;
        $bezier: cubic-bezier(0.4, 0.51, 0.83, 0.67);
        $animation-delay: random() *
          200 *
          -1; // Negative makes the animation start mid-way

        $x-start: random() * 3 - 1.5;
        $y-start: random() + 0.25;
        $z-start: random() * 3 - 1.5;
        $scale-x-start: random() * 0.75 + 0.25;
        $scale-y-start: 1;
        $opacity-start: random() * 0.3 + 0.7;

        $x-end: random() * 1 - 0.5;
        $y-end: random() * -3.5 - 1;
        $z-end: random() * 1 - 0.5;
        $scale-x-end: 0.25;
        $scale-y-end: 0.25;
        $opacity-end: random() * 0.2 + 0.8;

        // Some rare runaway sparks
        @if random() > 0.9 {
          $x-end: $x-end + random() * 5 - 2.5;
          $y-end: $y-end + random() * -10;

          $scale-x-start: 0.25;
          $scale-y-start: 0.25;

          $scale-x-end: 0;
          $scale-y-end: 0;
        }

        $hue-start: random() * 50;
        $saturation-start: 0.9 + random() * 0.1;
        $lightness-start: 0.4 + random() * 0.5;

        $hue-end: random() * 50;
        $saturation-end: 0.9 + random() * 0.1;
        $lightness-end: 0.3 + random() * 0.5;

        &:nth-child(#{$i}) {
          width: #{$width}rem;
          height: #{$height}rem;
          animation: fire-particle-#{$i}
            #{$particle-speed}s
            #{$bezier}
            infinite
            normal;
          animation-delay: #{$animation-delay}ms;
        }

        @keyframes fire-particle-#{$i} {
          0% {
            transform: translate3d(
                #{$x-start}rem,
                #{$y-start}rem,
                #{$z-start}rem
              )
              scale(#{$scale-x-start}, #{$scale-y-start});
            background-color: hsl(
              $hue-start,
              percentage($saturation-start),
              percentage($lightness-start)
            );
            opacity: $opacity-start;
          }
          100% {
            transform: translate3d(#{$x-end}rem, #{$y-end}rem, #{$z-end}rem)
              scale(#{$scale-x-end}, #{$scale-y-end});
            background-color: hsl(
              $hue-end,
              percentage($saturation-end),
              percentage($lightness-end)
            );
            opacity: $opacity-end;
          }
        }
      }
    }
  }
  &.bright {
    .bright-particle {
      bottom: 2.5rem;
      border-radius: 0.25rem;

      @for $i from 1 through 50 {
        // Size
        $width: random() * 0.2 + 0.2;
        $height: random() * 0.3 + 0.3;

        // Animation
        $particle-speed: random() * 0.3 + 0.1;
        $bezier: ease-in-out;
        $animation-delay: random() *
          200 *
          -1; // Negative makes the animation start mid-way
        &:nth-child(#{$i}) {
          width: #{$width}rem;
          height: #{$height}rem;
          animation: bright-fire-particle-#{$i}
            #{$particle-speed}s
            #{$bezier}
            infinite
            normal;
          animation-delay: #{$animation-delay}ms;
        }

        $x-start: random() * 2 - 1;
        $y-start: random() * 0.25;
        $z-start: random() * 0.25;
        $scale-start: 1;
        $opacity-start: random() * 0.3 + 0.7;

        $x-end: random() * 0.5 - 0.25;
        $y-end: random() * -1.5;
        $z-end: random() * -1.5;
        $scale-end: 0.5;
        $opacity-end: random() * 0.2 + 0.8;

        $hue-start: random() * 50;
        $saturation-start: 0.9 + random() * 0.1;
        $lightness-start: 0.7 + random() * 0.3;

        $hue-end: random() * 50;
        $saturation-end: 0.9 + random() * 0.1;
        $lightness-end: 0.5 + random() * 0.3;

        @keyframes bright-fire-particle-#{$i} {
          0% {
            transform: translate3d(
                #{$x-start}rem,
                #{$y-start}rem,
                #{$z-start}rem
              )
              scale(#{$scale-start});
            background-color: hsl(
              $hue-start,
              percentage($saturation-start),
              percentage($lightness-start)
            );
            opacity: $opacity-start;
          }
          100% {
            transform: translate3d(#{$x-end}rem, #{$y-end}rem, #{$z-end}rem)
              scale(#{$scale-end});
            background-color: hsl(
              $hue-end,
              percentage($saturation-end),
              percentage($lightness-end)
            );
            opacity: $opacity-end;
          }
        }
      }
    }
  }
  &.log {
    .item {
      position: absolute;
      bottom: 1.5rem;
      width: 3rem;
      height: 1.2rem;
      border-radius: 0.3rem 0.5rem;
      animation: log 400ms ease-in-out infinite alternate;
      animation-fill-mode: both;
      &:nth-child(1) {
        left: calc(50% - 2.6rem);
        bottom: 1.8rem;
        transform: rotateZ(#{random() * 20 + 5}deg) translateZ(-0.5rem);
        height: 0.8rem;
        background-color: rgb(
          random() * 30 + 50,
          random() * 20 + 10,
          random() * 10
        );
      }
      &:nth-child(2) {
        left: calc(50% - 0.1rem);
        width: 3.4rem;
        transform: rotateZ(#{random() * -5 - 5}deg)
          skew(#{random() * -10 - 5}deg);
        animation-delay: -50ms;
        background-color: rgb(
          random() * 30 + 50,
          random() * 20 + 10,
          random() * 10
        );
        &::after {
          content: "";
          position: absolute;
          top: -0.3rem;
          left: 50%;
          width: 0.3rem;
          border-radius: 0.2rem;
          background-color: #663300;
          transform: rotateX(5deg);
          animation: log 500ms ease-in-out infinite alternate;
        }
      }
    }
  }
  &.weeds {
    top: auto;
    bottom: 0;
    height: 3rem;
    .weed {
      width: 0;
      height: 0;
      border: 0.5rem solid transparent;
      animation: weed 1s ease-in-out infinite alternate;
      &::before,
      &::after {
        content: "";
        position: absolute;
        border: 0.5rem solid transparent;
      }

      @for $i from 1 through 100 {
        &:nth-child(#{$i}) {
          $bottom: random() * 2;
          $left: random() * 30;
          @if ($left > 10) and ($left < 20) and ($bottom > 1) {
            $bottom: $bottom - 1;
          }
          left: #{$left}rem;
          bottom: #{$bottom}rem;
          &,
          &::before,
          &::after {
            $hue: random() * 40 + 60;
            $saturation: random() * 0.3 + 0.2;
            $lightness: random() * 0.3 + 0.1;
            $width: random() * 0.05;
            $height: random() * 1.25 + 0.5;
            $animation-delay: random() * 400 * -1;

            border-width: 0 #{$width}rem #{$height}rem #{$width}rem;
            border-bottom-color: hsla(
              $hue,
              percentage($saturation),
              percentage($lightness),
              0.85
            );
            box-shadow: 0.05rem -0.1rem 0.1rem rgba(0, 0, 0, 0.2);
            transform-origin: 50% 100%;
            animation-delay: #{$animation-delay}ms;
          }
          &::before {
            $rotate: random() * 60 - 30;
            left: #{random() * -0.5 - 0.1}rem;
            top: #{random() * 0.5 - 0.25}rem;
            transform: rotateZ(#{$rotate}deg);
          }
          &::after {
            $rotate: random() * 60 - 30;
            left: #{random() * 0.5 + 0.1}rem;
            top: #{random() * 0.5 - 0.25}rem;
            transform: rotateZ(#{$rotate}deg);
          }
        }
      }
    }
  }
  &.glow {
    .glow-particle {
      $animation-speed: 1 + random() * 1;
      $bezier: cubic-bezier(0.3, 0.51, 0.83, 0.67);

      bottom: 2.5rem;
      background-color: hsl(random() * 50, 80%, 60%);
      border-radius: 50%;
      transform: translateX(-50%);
      animation: glow #{$animation-speed}s #{$bezier} infinite alternate;
    }
  }
  &.bug {
    .bug-particle {
      top: 55%;
      left: 45%;
      width: 0.2rem;
      height: 0.2rem;
      border-radius: 50%;
      background-color: #fff;
      animation: bug var(--speed) linear infinite normal;
      animation-delay: var(--delay);

      $scale-start: random() * 0.5;
      $opacity-start: random() * 0.2 + 0.2;

      $scale-end: random() * 0.8 + 0.2;
      $opacity-end: random() * 0.2 + 0.3;

      @keyframes bug {
        0% {
          transform: rotate(0deg) scaleY($scale-start);
          opacity: $opacity-start;
        }
        100% {
          transform: rotate(360deg) scaleY($scale-end);
          opacity: $opacity-end;
        }
      }
    }
  }

  &.vignette {
    background-image: radial-gradient(
      20rem at 50% 50%,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.25) 100%
    );
  }
}

@keyframes log {
  0% {
    box-shadow: inset 0.1rem -0.3rem 0.3rem rgba(0, 0, 0, 0.5),
      inset 0 0.1rem 0.3rem rgba(255, 165, 0, 0.2),
      0 0.2rem 1rem rgba(0, 0, 0, 1);
  }
  100% {
    box-shadow: inset 0.1rem -0.3rem 0.3rem rgba(0, 0, 0, 0.75),
      inset 0 0.2rem 0.6rem rgba(255, 165, 0, 0.5),
      0 0.2rem 0.8rem rgba(0, 0, 0, 0.75);
  }
}

@keyframes weed {
  $z-depth: random() * 2 - 1;
  $rotate-start: random() * 10 - 5;

  $rotate-end: random() * 10 - 5;

  0% {
    transform: rotateZ(#{$rotate-start}deg) translateZ(#{$z-depth}rem);
  }
  100% {
    transform: rotateZ(#{$rotate-end}deg) translateZ(#{$z-depth}rem);
  }
}

@keyframes glow {
  $i: 0;
  @while $i <= 100 {
    #{percentage(calc($i / 100))} {
      opacity: 0.2 + random() * 0.4;
      width: #{random() * 5 + 2}rem;
      height: #{random() * 3 + 2}rem;
    }

    // This creates 10 steps
    $i: $i + 10;
  }
}
